<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>WebMOOC Res</title>
  <link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
  <!--顶部状态栏-->
  <div class="box">
    <div class="top">
      <div class="date">
        <p id="date"></p>
      </div>
      <div class="cash">
        <p id="cash"></p>
      </div>
    </div>
    <!--厨师-->
    <div class="cook" id="cook"></div>
    <!--顾客-->
    <div class="customer">
      <div class="cus">
        <div class="cir" id="seat1">
        </div>
      </div>
      <div class="cus">
        <div class="cir" id="seat2">
        </div>
      </div>
      <div class="cus">
        <div class="cir" id="seat3">
        </div>
      </div>
      <div class="cus">
        <div class="cir" id="seat4">
        </div>
      </div>
    </div>
  </div>
  <!--招聘厨师窗口-->
  <div class="welcome" style="display: none" id="advertise">
    <div class="message">
      <h1 class="advertise">招聘新厨师</h1>
      <p class="p1">
        招聘一名新厨师可以帮你更快地为顾客烹饪菜肴，<br>
        增加餐厅收入。你最多可以拥有六名厨师。<br>
        但每个厨师每周需要你支付工资 ￥100，<br>
        请问你确认新招聘一名厨师吗？<br>
      </p>
      <div class="bar">
        <div id="advertise_y">是的，确认招聘</div>
        <div id="advertise_n">先不了</div>
      </div>
    </div>
  </div>
  <!--解雇厨师窗口-->
  <div class="welcome" style="display: none" id="fire">
    <div class="message">
      <h1 class="fire">解雇厨师</h1>
      <p class="p1">
        解雇当前闲置的厨师可以帮你节省成本。<br>
        解雇时会按照厨师本周已经工作的日子结算工资，<br>
        并会赔偿一周工资作为解约金。<br>
        解雇当前厨师结算工资及解约金需要付出 ￥140<br>
      </p>
      <div class="bar">
        <div id="fire_y">是的，确认解雇</div>
        <div id="fire_n">先不了</div>
      </div>
    </div>
  </div>
  <!-- 欢迎窗口 -->
  <div class="welcome open" id="welcome">
    <div class="message">
      <h1>WebMOOC餐厅开业啦！</h1>
      <p class="p1">
        WebMOOC餐厅即将开业，请认真经营你的餐厅吧，经营餐厅需要做好下面几件事情！加油！
      </p>
      <p class="p2">
        <span>招聘厨师</span>
        <span>迎接客人</span>
        <span>烹饪美食</span>
      </p>
      <div class="start" id="start">
        <p>开始经营吧</p>
      </div>
    </div>
  </div>
  <!--顾客等候列表-->
  <div class="waiting" id="waiting"></div>
  <script src="../js/index.js"></script>
  <!--消息提醒-->
  <div class="info" id="info">
    <p id="info_text"></p>
  </div>
  <!--菜单-->
  <div class="menu_wrapper" id="menu">
    <div class="menu"> 
      <h2 id="menu_title" class="title"></h2>
      <div class="cus_waiting customer" id="menu_avatar"></div>
      <div class="form">
        <form id="menu_form">
          <h3>凉菜（二选一，可不点）</h3>
          <div class="menu_item">
            <div><input type="checkbox" value="6" name="menu"/><span>凉拌SAN</span></div>
            <div>···························<span>￥6</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="4" name="menu"/><span>冷切DOM</span></div>
            <div>···························<span>￥4</span></div>
          </div>
          <h3>主菜（五选一，必点）</h3>
          <div class="menu_item">
            <div><input type="checkbox" value="12" name="menu"/><span>UL抄LI</span></div>
            <div>···························<span>￥12</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="15" name="menu"/><span>红烧HEAD</span></div>
            <div>···························<span>￥15</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="18" name="menu"/><span>酥炸ECharts</span></div>
            <div>···························<span>￥18</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="16" name="menu"/><span>炙烤CSS</span></div>
            <div>···························<span>￥16</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="12" name="menu"/><span>清蒸DIV</span></div>
            <div>···························<span>￥12</span></div>
          </div>
          <h3>饮品（二选一，可不点）</h3>
          <div class="menu_item">
            <div><input type="checkbox" value="5" name="menu"/><span>鲜榨flex</span></div>
            <div>···························<span>￥5</span></div>
          </div>
          <div class="menu_item">
            <div><input type="checkbox" value="6" name="menu"/><span>小程序奶茶</span></div>
            <div>···························<span>￥6</span></div>
          </div>
        </form>
      </div>
      <div class="bar">
        <div class="cannot" id="order">点好了，快点上菜</div>
        <div id="quit">不吃了</div>
      </div>
    </div>
  </div>
</body>
</html>